
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
<script>
    /*!
 *@name     jquery.barrager.js
 *@version  1.1
 *@author   yaseng@uauc.net
 *@url      https://github.com/yaseng/jquery.barrager.js
 */
(function($) {

	$.fn.barrager = function(barrage) {
		barrage = $.extend({
			close:true,
			bottom: 0,
			max: 10,
			speed: 8,
			color: '#fff',
			old_ie_color : '#000000'
		}, barrage || {});

		var time = new Date().getTime();
		var barrager_id = 'barrage_' + time;
		var id = '#' + barrager_id;
		var div_barrager = $("<div class='barrage' id='" + barrager_id + "'></div>").appendTo($(this));
		var window_height = $(window).height() - 100;
		var this_height =  (window_height > this.height()) ? this.height() : window_height;
		var window_width = $(window).width() + 500;
		var this_width =  (window_width > this.width()) ? this.width() : window_width;
		var bottom = (barrage.bottom == 0) ? Math.floor(Math.random() * this_height + 40) : barrage.bottom;
		div_barrager.css("bottom", bottom + "px");
		div_barrager_box = $("<div class='barrage_box cl'></div>").appendTo(div_barrager);
		if(barrage.img){

			div_barrager_box.append("<a class='portrait z' href='javascript:;'></a>");
			var img = $("<img src='' >").appendTo(id + " .barrage_box .portrait");
			img.attr('src', barrage.img);
		}
		div_barrager_box.append(" <div class='z p'></div>");
		if(barrage.close){

			div_barrager_box.append(" <div class='close z'></div>");

		}
		
		var content = $("<a title='' href='' target='_blank'></a>").appendTo(id + " .barrage_box .p");
		content.attr({
			'href': barrage.href,
			'id': barrage.id
		}).empty().append(barrage.info);
		if(navigator.userAgent.indexOf("MSIE 6.0")>0  ||  navigator.userAgent.indexOf("MSIE 7.0")>0 ||  navigator.userAgent.indexOf("MSIE 8.0")>0  ){

			content.css('color', barrage.old_ie_color);

		}else{

			content.css('color', barrage.color);

		}
		
		var i = 0;
		div_barrager.css('margin-right', 0);
		
 		$(id).animate({right:this_width},barrage.speed*1000,function(){

			$(id).remove();
		});

		div_barrager_box.mouseover(function() {
		     $(id).stop(true);
		});

		div_barrager_box.mouseout(function() {

			$(id).animate({right:this_width},barrage.speed*1000,function(){

				$(id).remove();
			});

 		});

		$(id+'.barrage .barrage_box .close').click(function(){

			$(id).remove();

		})

	}
 
	$.fn.barrager.removeAll=function(){

		 $('.barrage').remove();

	}

})(jQuery);

</script>
<div id="_dc_barrage_send_"></div>
<style>
    .send{
        position: fixed;bottom: 0px;width: 100%;
    }
    .barrage{position: fixed;bottom:70px;right:-500px;display: inline-block;width: 500px;z-index: 99999}
    .barrage_box{background-color: rgba(0,0,0,.5);padding-right: 8px; height: 40px;display: inline-block;border-radius: 25px;transition: all .3s;}
    .barrage_box .portrait{ display: inline-block;margin-top: 4px; margin-left: 4px; width: 32px;height: 32px;border-radius: 50%;overflow: hidden;}
    .barrage_box .portrait img{width: 100%;height: 100%;}
    .barrage_box div.p a{ margin-right: 2px; font-size: 14px;color: #fff;line-height: 40px;margin-left: 18px; }
    .barrage_box div.p a:hover{text-decoration: underline;}
    .barrage_box .close{visibility: hidden;opacity: 0; text-align: center; width:25px;height: 25px;margin-left: 20px;border-radius: 50%;background:rgba(255,255,255,.1);margin-top:8px; background-image: url(close.png);}
    .barrage_box:hover .close{visibility:visible;opacity: 1;}
    .barrage_box .close a{display:block;}
    .barrage_box .close .icon-close{font-size: 14px;color:rgba(255,255,255,.5);display: inline-block;margin-top: 5px; }
    .barrage .z {float: left !important;}
    .barrage  a{text-decoration:none;}
</style>
<script>

dc_barrage = {
    barrage: function (data, cb){
        console.log(data)
        window["_dc_barrage_data_"] = data; 
        window["_dc_barrage_cb_"] = cb;
        if(window["_dc_barrage_data_"].SendCardPosition=='fixed'){
            //固定底部默认
            $(`#_dc_barrage_send_`).prepend(`<div id="dc_barrage_card" class="send" style="display: none;">
            <div class="card">
                <div class="card-body">
                    <div class="input-group mb-3">
                        <input id="_dc_barrage_send__input" type="text" class="form-control" placeholder="想说的话……">
                        <div class="input-group-append">
                        <button id="_dc_barrage_submit" type="button" class="btn btn-success"  >Go</button>  
                        <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#_dc_barrage_send_card">更多</button>
                        </div>
                    </div>
                    <div>
                        <div id="_dc_barrage_send_card" class="collapse" style="margin: 5px;">
                            <select  class="form-control" >
                                <option>支持主播！为主播打call！</option>
                                <option>大家没关注的点点关注！</option>
                                <option>这个操作6666啊！</option>
                            </select>
                        </div>

                    </div>
                </div>
            </div>
        </div>`);
        }else{

            //插入到指定div中
            $(`#`+window["_dc_barrage_data_"].SendCardPosition).prepend(`<div id="dc_barrage_card" class="send">
                <div class="card">
                    <div class="card-body">
                        <div class="input-group mb-3">
                            <input id="_dc_barrage_send__input" type="text" class="form-control" placeholder="想说的话……">
                            <div class="input-group-append">
                            <button id="_dc_barrage_submit" type="button" class="btn btn-success"  >Go</button>  
                            <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#_dc_barrage_send_card">更多</button>
                            </div>
                        </div>
                        <div>
                            <div id="_dc_barrage_send_card" class="collapse" style="margin: 5px;">
                                <select  class="form-control" >
                                    <option>支持主播！为主播打call！</option>
                                    <option>大家没关注的点点关注！</option>
                                    <option>这个操作6666啊！</option>
                                </select>
                            </div>

                        </div>
                    </div>
                </div>
            </div>`);
            //改变其位置
            $(`#dc_barrage_card`).css("position","relative");
        }
        //显示弹幕框
        if(window["_dc_barrage_data_"].UseSendCard){
            $(`#dc_barrage_card`).css("display","block");
        }
        //监听选择框并赋值给输入框
        $('#_dc_barrage_send_card select').change(() => {
            console.log($('#_dc_barrage_send_card select').val());
            $('#_dc_barrage_send__input').val($('#_dc_barrage_send_card select').val());
        });
        //监听提交按钮
        $('#_dc_barrage_submit').click(() => {
            cb();
        });
        
    },

}
function send_barrage(data){
    $(window["_dc_barrage_data_"].ShowBarragePosition).barrager(data);
}
function get_random(){
    var num =Math.random();
        num=num*window.innerHeight;
        num=Math.floor(num);
        if(num<94){
            num=num+94;
        }
        console.log(num);
        return num
}
</script>